<template>
    <div class="loginbox">
        <div class="box">
            <div class="IMG">
                <img src="../assets/微信图片_20220408141550.jpg" alt="">
            </div>
            <div>
                <el-form ref="form" :rules="rules" :model="form" label-width="80px">
                    <el-form-item label="用户名:" style=" margin-right: 20px;font-size: 17px" prop="username">
                        <el-input v-model="form.username" placeholder="请输入用户名"></el-input>
                    </el-form-item>
                    <el-form-item label="密码:" style=" margin-right: 20px;font-size: 17px" prop="pass">
                        <el-input v-model="form.pass" type="password" placeholder="请输入密码"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button @click="login()" type="primary" style="width: 250px; margin-left: 0px;" >{{ loginState ? '正在登录...' : '登录' }}</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </div>
    </div>
</template>

<script>
    import {Login} from '@/api/Login'
    import {debounce} from '@/untils/global'
export default {
    data(){
        return{
            loginState:false,
            form:{
                username:"",
                pass:""
            },
            rules:{
                username: [
                    { required: true, message: '请输入账号', trigger: 'blur' },
                ],
                pass: [
                    { required: true, message: '请输入密码', trigger: 'blur' },
                    { min: 6, max: 18, message: '长度在 6 到 18 个字符', trigger: 'blur' }
                ],
            }
        }
    },
    methods:{
        login:debounce(async function(e){
            this.loginState = true
            let res = await Login(this.form)
            this.loginState = false
            console.log(res);
            if(res.errCode=="10000"){
                sessionStorage.setItem("token",res.data.token)
                
                this.$message.success("恭喜你，登录成功")
                this.$store.commit("menu/setMenu", res.data.menu)
                this.$store.commit("user/setName",this.form.username)
                this.$router.push('/Home')
            }else{
                this.$message.success("没有此用户")
                this.loginState = false
            }
        })  
    }
}
</script>

<style lang="less" scoped>
.loginbox {
    background-image: url(../assets/微信图片.jpg);
    background-size: 1920px;
    height: 961px;
}

.box {
    width: 400px;
    height: 300px;
    background-color: aqua;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background-image: url(../assets/微信图片_20220408141550.jpg);
    background-size: 400px;
    border-radius: 10px;
    position: relative;

    .IMG {
        width: 100px;
        height: 100px;
        border-radius: 50%;

        img {
            width: 100px;
            height: 100px;
            border: 5px solid #fff;
            border-radius: 50%;
            position: absolute;
            top: 0;
            left: 50%;
            transform: translate(-50%, -50%);
        }
    }
}
</style>